import { useEffect, useState } from "react";
import st from "./detail.module.css";
import api from "../../api/request";
import Header from "../../componets/Header";
import USER from "../../assets/img/user.svg";
import { useNavigate, useParams } from "react-router";
const VipDetail = () => {
  const [userInfo, setUserInfo] = useState<any>({});
  // 获取路由url路径传参中的参数，利用useParams（）
  const { id } = useParams();
  console.log(userInfo)
  useEffect(() => {
    api.get(`/me-api/members-detail?id=${id}`).then((res) => {
      //   看来得先对一些特殊字段进行一下处理
      //   性别 （gender）：女2  男1  未知0
      //   注册来源（started）：  微信公众号0  微信小程序1  会员档案2
      // -------------以下字段直接用三元表达式再传值时进行处理
      //   微信状态（status）：  在粉0  掉粉1
      //   会员状态（memberState）：  启用1  停用0

      const result = res.data.data;
      if (result.gender == 1) result.gender = "男";
      if (result.gender == 2) result.gender = "女";
      if (result.gender == 0) result.gender = "未知";

      if (result.started == 1) result.started = "微信公众号";
      if (result.started == 2) result.started = "微信小程序";
      if (result.started == 3) result.started = "会员档案";
      setUserInfo(result);
    });
  }, []);
  return (
    <div className={st.container}>
      <Header leftIcon={true}>会员详情</Header>
      <div className={st.box}>
        <UserHeader userInfo={userInfo} userId={id} />
        <InfoGroup title="基本信息">
          <GroupItem title={"昵称"} info={userInfo.nickname} />
          <GroupItem title={"手机号"} info={userInfo.phone} />
          <GroupItem title={"性别"} info={userInfo.gender} />
          <GroupItem title={"生日"} info={userInfo.birthday} />
          <GroupItem title={"卡号"} info={userInfo.card} />
          <GroupItem title={"成长值"} info={userInfo.growth} />
          <GroupItem title={"推荐人手机号"} info={userInfo.recommender} />
          <GroupItem title={"注册时间"} info={userInfo.register} />
          <GroupItem title={"注册来源"} info={userInfo.started} />
          <GroupItem
            title={"微信状态"}
            info={userInfo.memberState == 1 ? "在粉" : "掉粉"}
          />
          <GroupItem title={"地址管理"} info={userInfo.address} />
          <GroupItem title={"备注"} info={userInfo.remark} />
        </InfoGroup>
        <InfoGroup title="会员资产">
          <GroupItem title={"初期消费金额"} info={userInfo.consumMoney} />
          <GroupItem title={"初期消费次数"} info={userInfo.consumTimes} />
          <GroupItem
            title={"优惠券"}
            info={userInfo.coupon ? userInfo.coupon : 0}
          />
          {/* 后端接口中并没有这两条数据 */}
          <GroupItem title={"累计消费金额"} info={userInfo.consumMoney} />
          <GroupItem title={"累计消费次数"} info={userInfo.consumTimes} />
        </InfoGroup>
      </div>
    </div>
  );
};

// header
const UserHeader = ({ userInfo, userId }: any) => {
  const navigate = useNavigate()
  const getConpon = (id: any) => {
    api.get(`/me-api/coupons?id=${''}`).then((res) => console.log(res));
    navigate('/conpon')
  };

  return (
    <div className={st.head}>
      <img src={userInfo.url} alt="" className={st.avatar} />
      <div className={st.info}>
        <div className={st.infoTop}>
          <span className={st.nickname}>{userInfo.nickname}</span>
          <img src={USER} alt="" className={st.topIcon} />
          <span className={st.level}>{"黄金会员"}</span>
        </div>
        <div className={st.infoBottom}>最近消费：{userInfo.lastConsumDate}</div>
      </div>
      <div className={st.coupon} onClick={() => getConpon(userId)}>
        <div className={st.couNumber}>
          {userInfo.coupon ? userInfo.coupon : 0}
        </div>
        <div className={st.couText}>优惠券</div>
        <div className={st.rightIcon}>{""}</div>
      </div>
    </div>
  );
};

// InfoGroup
const InfoGroup = ({ children, title }: any) => {
  return (
    <div className={st.group}>
      <div className={st.groupTitle}>
        <span>{title}</span>
      </div>
      <div className={st.groupContent}>{children}</div>
    </div>
  );
};

// GroupItem
const GroupItem = ({ title, info }: any) => {
  return (
    <div className={st.grpItem}>
      <span className={st.itemTitle}>{title}</span>
      <span className={st.infoItem}>{info}</span>
    </div>
  );
};

export default VipDetail;
